import React from "react"
class Sun extends React.Component {
    //如果数据是组件的状态 需要去影响视图 定义到state里
	//如果需要的数据不和视图绑定 定义成一个普通属性即可
	//state中尽量保持精简
    timer=null
    componentDidMount(){
        this.timer=setInterval(()=>{
            console.log('定时器')
        },1000)
    }
    componentWillUnmount() {
        clearInterval(this.timer)
        console.log('componentWillUnmount')
    }
    render() {
        return (
            <div>子组件</div>
        )
    }
}
export class Test13 extends React.Component {
    state = {
        msg: 12,
        falg: true
    }
    constructor() {
        super()
        console.log('constructor')
    }
    componentDidMount() {
        console.log('componentDidMount')
    }
    componentDidUpdate() {
        console.log('componentDidUpdate')
    }
   
    setMsg = (msg) => {
        this.setState({
            msg: msg 
        })
    }
    setFlag = () => {
        this.setState({
            falg: !this.state.falg
        })
    }
    render() {
        console.log('render')
        return (
            <div>
                <h1>13.组件生命周期</h1>
                {this.state.msg}
                <button onClick={() => this.setMsg(15)}>改变msg</button>
                {this.state.falg ? <Sun /> : null}
                <button onClick={() => this.setFlag()}>子组件销毁创建</button>
            </div>
        )
    }

}